<template>
  <div class="page">
    <div class="head">
      <img src="./assets/img/logo.png" alt="" class="logo" />
      <span class="title">店务管理系统</span>
    </div>
    <div class="body">
      <div class="panel">
        <div class="cn-medium title">店务管理系统</div>

        <div class="item i-gap">
          <div class="icon">
            <img src="./assets/img/tel.png" alt="" />
          </div>
          <a-input
            class="fill"
            :bordered="false"
            v-model:value.trim="form.userName"
            placeholder="加盟店编号或者手机号码"
          />
        </div>
        <div class="item i-gap"  v-if="state.isShop">
          <div class="icon">
            <img src="./assets/img/shop.png" alt="" />
          </div>
          <a-select
            v-model:value="form.storeList"
            placeholder="请选择店铺"
            class="fill"
            :options="shopData"
            :allow-clear="true"
            :bordered="false"
            @change="onChangeShop"
          >
          </a-select>
        </div>

        <div class="item i-gap">
          <div class="icon">
            <img src="./assets/img/lock.png" alt="" />
          </div>

          <a-input-password
            class="fill"
            :bordered="false"
            type="password"
            v-model:value.trim="form.passWord"
            placeholder="登录密码"
          />
        </div>

        <div class="item2 i-gap">
          <div class="fill item">
            <div class="icon">
              <img src="./assets/img/eye.png" alt="" />
            </div>
            <a-input
              class="fill"
              :bordered="false"
              type="number"
              v-model:value.trim="form.checkImageCode"
              placeholder="验证码"
            />
          </div>

          <div class="captcha" @click="refreshCaptcha">
            <img v-if="!!state.captchaSrc" :src="state.captchaSrc" alt="" />
          </div>
        </div>

        <div :class="['use', 'btn', isValid(false) ? 'btn-login' : 'btn-invalid']" @click="onLogin">
          立即登录
        </div>

        <center>
          <a-button type="link" style="margin-top:10px;" @click="ResetPassword">忘记密码？</a-button>
        </center>
      </div>
    </div>
  </div>
</template>
<script setup>
import {onBeforeMount, reactive, ref, watch} from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { appendArg, POST, URL, userFromType } from '@/api/http';
  import { useUserStore } from '@/store/modules/user';
  import { useRouter } from 'vue-router'
  import { encrypt } from '@/api/aes';
import {beauticianRef} from "@/views/cashier/cart";
  const { createMessage } = useMessage();
  const userStore = useUserStore();
  const shopData = ref([])
  const form = reactive({
    loginType: 'pc',
    userFromType:'',
    userName: '',
    storeList:[],
    storeCode:'',
    passWord: '',
    checkImageCode: '',
  });

  const state = reactive({ captchaSrc: null,isShop:false, });

  const router = useRouter()

  onBeforeMount(async () => {
    const token = await POST('/membership/getTemporaryToken');
    userStore.setToken(token);
    refreshCaptcha();
  });
  function onChangeShop(e){
    form.storeCode = e
  }
  function refreshCaptcha() {
    form.checkImageCode = '';
    state.captchaSrc = URL('/membership/getPictureCheckCode', { _t: Math.random() });
  }
  watch(
    () => form.userName,
    (newVal, oldVal) => {
      const phoneReg = /^1[345789]\d{9}/;
      if (phoneReg.test(newVal)) {
        // refreshCaptcha()
        state.isShop = true
        form.mobile = newVal
        POST('/membership/getStoreListByEmployeeMobile', {siteCodes: 'shop',mobile: newVal
        }).then((res) => {
          shopData.value = res.map((o) => ({
              value: o.storeCode,
              label: o.storeName,
            })) ?? [];
          refreshCaptcha()
        })
      } else {
        if (newVal?.length == 10) {
          form.mobile = ''
          form.storeCode = form.userName
          refreshCaptcha()
        }
        state.isShop = false
      }
    }
  )

  async function onLogin() {
    if (!isValid(true)) {
      return;
    }    
    try {
      let { storeCode, passWord, storeList, mobile} = form;
      passWord = encrypt(passWord);
     if (mobile){
       // form.userName = ''
       await userStore.login(appendArg(
         { ...form, storeCode:storeList,mobile:mobile, passWord, userName: '' })
       );
     } else {
       form.mobile = ''
       await userStore.login(appendArg({ ...form, storeCode: form.storeCode ? form.storeCode : form.userName, passWord }));
     }
    } catch (e) {
      refreshCaptcha();
    }
  }
  function isValid(tip) {
    const { userName, passWord, checkImageCode, storeList,mobile } = form;
    if (!userName) {
      tip && createMessage.error('请输入加盟店编号或者手机号码');
      return false;
    }
    if(mobile?.length ===11 && storeList?.length===0) {
      tip && createMessage.error('请选择加盟店');
      return false;
    }
    if (!passWord) {
      tip && createMessage.error('请输入登录密码');
      return false;
    }

    if (!checkImageCode && checkImageCode?.toString() !== '0') {
      tip && createMessage.error('请输入验证码');
      return false;
    }
    return true;
  }

  function ResetPassword() {
    userStore.setToken('') // 清除临时token 避免返回时重定向
    router.push('/reset-password')
  }
</script>

<style lang="less" scoped>
  .page {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background-color: #f8ebe3;
  }

  .head {
    display: flex;
    align-items: center;
    width: 100%;
    height: 54px;
    background: #fff;

    .logo {
      width: 228px;
      margin-left: 20vw;
    }

    .title {
      margin-left: 2vw;
      color: #f1a3b8;
      font-size: 12px;
      font-weight: 600;
    }
  }

  .body {
    display: flex;
    position: relative;
    flex: 1;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    background: url('./assets/img/bg.png') no-repeat;
    background-size: contain;
  }

  .panel {
    width: 348px;
    min-height: 360px;
    margin-right: 14vw;
    padding: 16px 32px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 16px 0px 32px 0px rgba(0,0,0,0.02);

    .title {
      padding: 6px 0 12px;
      font-size: 16px;
      text-align: center;
    }

    .item {
      padding: 4px 10px;
      border: 1px solid #e0e5ec;
      border-radius: 6px;
    }
    .ant-select-selector {
      border: none !important;
    }
    .item,
    .item2 {
      display: flex;
      align-items: center;
    }

    .i-gap {
      margin: 18px 0;
    }

    .icon {
      margin-right: 4px;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 12px 0;
    }

    .btn-invalid {
      background: #ced2d9;
    }

    .btn-login {
      background-color: #f1a3b8;
    }

    .btn-login,
    .btn-invalid {
      height: 40px;
      border-radius: 6px;
      color: #fff;
    }

    .btn2 {
      color: #f1a3b8;
      font-size: 13px;
      font-weight: 400;
    }

    .captcha {
      width: 120px;
      margin-left: 8px;
      cursor: pointer;

      img {
        width: 100%;
        height: 40px;
        border-radius: 4px;
      }
    }
  }
</style>
